<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 绑定样式</title>
    <script charset="UTF-8" src="js/vue.js"></script>
</head>
<style>
    /*.active {*/
        /*color: red;*/
    /*}*/
</style>
<body>
<div id="app">
    <!--class对象绑定方式-->
    <!--<div @click="handleDivClick"-->
         <!--:class="{active:isActive}"-->
    <!--&gt;Hell World-->
    <!--</div>-->
    <!--class数组绑定方式-->
    <!--<div @click="handleDivClick"-->
    <!--:class="[active]"-->
    <!--&gt;Hell World-->
    <!--</div>-->
    <!--style对象绑定方式-->
    <!--<div :style="styleObj" @click="handleDivClick">-->
        <!--Hell World-->
    <!--</div>-->
    <!--style数组绑定方式-->
    <div :style="[styleObj,{fontSize:'30px'}]" @click="handleDivClick">
        Hell World
    </div>
</div>
<script>
    //class对象绑定方式
    // let vm = new Vue({
    //     el: '#app',
    //     data: {
    //         isActive: false
    //     },
    //     methods: {
    //         handleDivClick: function () {
    //             this.isActive = !this.isActive;
    //         }
    //     }
    // });
    //class数组绑定方式
    // let vm = new Vue({
    //     el: '#app',
    //     data: {
    //         active: ""
    //     },
    //     methods: {
    //         handleDivClick: function () {
    //             this.active=this.active==="active"?"":"active";
    //         }
    //     }
    // });
    //style对象绑定方式
    // let vm = new Vue({
    //     el: '#app',
    //     data:{
    //         styleObj:{
    //             color:"black"
    //         }
    //     },
    //     methods:{
    //         handleDivClick:function () {
    //             this.styleObj.color=this.styleObj.color==="black"?"red":"black";
    //         }
    //     }
    // });
    //style数组绑定方式
    let vm = new Vue({
        el: '#app',
        data:{
            styleObj:{
                color:"black"
            }
        },
        methods:{
            handleDivClick:function () {
                this.styleObj.color=this.styleObj.color==="black"?"red":"black";
            }
        }
    });
</script>
</body>
</html>